<template>
    <div class="d3"/>
</template>

<script>
  /*eslint-disable*/
  import * as d3 from 'd3';

  const data = [99, 71, 78, 25, 36, 92];
  export default {
    name: 'd3',
    async mounted() {
      await this.$nextTick();
      const svg = d3.select(this.$el)
        .append('svg')
        .attr('width', 500)
        .attr('height', 500)
        .append('g')
        .attr('transform', 'translate(0, 10)');
      const xScale = d3.scaleLinear().range([0, 430]);
      const yScale = d3.scaleLinear().range([210, 0]);
      xScale.domain(d3.extent(data, (d, i) => i));
      yScale.domain([0, d3.max(data)]);

      d3.axisLeft().scale(xScale);
      d3.axisTop().scale(yScale);

      const createPath = d3.line()
        .x((d, i) => xScale(i))
        .y(d => yScale(d));
      svg.append('path').attr('d', createPath(data));
    },
  };
</script>
<style lang="less">
    .d3 {
        display: flex;
        flex: 1 1 auto;
        width: 100%;
        height: 100%;

        svg {

            path {
                fill: none;
                stroke: #76BF8A;
                stroke-width: 3px;
            }
        }
    }
</style>
